<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>英雄</title>
  <link rel="stylesheet" href="./css/hero.css" />
  <link rel="stylesheet" href="./css/comm-v1.css" />
</head>

<body>
  <div class="herolist-box">
    <div class="clearfix herolist-types">
      <ul class="types-left">
        <li>综合</li>
        <li>定位</li>
      </ul>
      <ul class="clearfix types-ms">
        <li data-ptype="10">
          <span class="ms-radio"><i class="i"></i></span>
          <label>本周免费</label>
        </li>
        <li data-ptype="11">
          <span class="ms-radio"><i class="i"></i></span>
          <label>新手推荐</label>
        </li>
      </ul>
      <ul class="clearfix types-ms">
        <li class="current" data-type="0">
          <span class="ms-radio"><i class="i"></i></span>
          <label>全部</label>
        </li>
        <li data-type="3">
          <span class="ms-radio"><i class="i"></i></span>
          <label>坦克</label>
        </li>
        <li data-type="1">
          <span class="ms-radio"><i class="i"></i></span>
          <label>战士</label>
        </li>
        <li data-type="4">
          <span class="ms-radio"><i class="i"></i></span>
          <label>刺客</label>
        </li>
        <li data-type="2">
          <span class="ms-radio"><i class="i"></i></span>
          <label>法师</label>
        </li>
        <li data-type="5">
          <span class="ms-radio"><i class="i"></i></span>
          <label>射手</label>
        </li>
        <li data-type="6">
          <span class="ms-radio"><i class="i"></i></span>
          <label>辅助</label>
        </li>
      </ul>
    </div>
    <div class="herolist-content">
      <ul class="herolist clearfix">
        <!-- <li >
          <a href="#" target="_blank"><img src="" width="91" height="91" alt="曜" />曜</a>
        </li> -->
      </ul>
    </div>
  </div>

  <!-- 数组比较多，放在了外接的js文件中 -->
  <script src="./hero.js"></script>
  <script>
    // 1. 渲染函数 render 
    function render(arr) {
      const strArr = arr.map(ele => {
        const { icon, name } = ele
        return `
        <li >
          <a href="#" target="_blank"><img src="${icon}" width="91" height="91" alt="${name}" />${name}</a>
        </li> 
        `
      })
      // 渲染
      document.querySelector('.herolist').innerHTML = strArr.join('')
    }
    render(heroArr)

    // 2. 点击可以进行筛选 利用循环绑定多个事件（注意这里li里面包含多个元素，事件委托比较麻烦）
    const lis = document.querySelectorAll('.types-ms>li')
    lis.forEach(ele => {
      // 循环绑定事件
      ele.addEventListener('click', function () {
        // 排他思想，当前高亮
        document.querySelector('li.current').classList.remove('current')
        this.classList.add('current')

        // 筛选页面
        // 初始值为总数组
        const arr = heroArr
        // console.log(this.dataset.ptype)  得到当前元素的自定义属性值
        // 点击时候，利用当前自定属性值到数组里面筛选符合条件的
        arr = heroArr.filter(ele => ele.pay_type === +this.dataset.ptype || ele.hero_type === +this.dataset.type)
        render(arr)
      })
    })

  </script>
</body>

</html>